<!-- 供应商 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-input v-model="search.search_name" type="text" class="seach-input " size="small" placeholder="输入供应商">
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-select v-model="search.status" placeholder="全部状态" class="seach-select" size="small">
        <el-option v-for="item in search.status_options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button class="greenbt" size="small">查询</el-button>
      <el-button class="greenbt" size="small" @click="addFun()" >新增</el-button>
    </div>
    <div class="table-ymm">
      <el-table :data="tableData" style="width: 100%" border >
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="edcitFun(scope.row)">编辑</el-button>
            <el-button type="text">停用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="供应商编码">
          <template slot-scope="scope">
            <span >{{ scope.row.name2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称">
          <template slot-scope="scope">
            <span >{{ scope.row.name3 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.name7=='1'" style="color:#28A087">正常</span>
            <span v-else-if="scope.row.name7=='2'" style="color:#F05050">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人">
          <template slot-scope="scope">
            <span >{{ scope.row.name8 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话">
          <template slot-scope="scope">
            <span >{{ scope.row.name9 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别">
          <template slot-scope="scope">
            <span >{{ scope.row.name10 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <span >{{ scope.row.name11 }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination :current-page="table.current_page" :page-sizes="[10, 20, 30, 40]" :page-size="10" :pager-count="table.page_count" :total="table.total" background layout="sizes, prev, pager, next,total" @current-change="handleCurrentChange"/>
    </div>
    <component :is="modal" :modal-data="modalData" @close="closeChild"/>
  </div>
</template>
<script>
import Add from './dialog/Add.vue'
export default{
  data() {
    return {
      modal: null, modalData: {},
      search: {
        status: '', status_options: [], shop: '', shop_options: [],
        date: '', search_name: ''

      },
      tableData: [
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '1', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        },
        {
          name1: 'FH45454523215', name2: '供应商代发', name3: '供应商代发', name4: '供应商代发', name5: '供应商代发', name6: '供应商代发', name7: '2', name8: '供应商代发', name9: '供应商代发',
          name10: '供应商代发', name11: '供应商代发', name12: '供应商代发', name13: '供应商代发', name14: '供应商代发', name15: '供应商代发', name16: '供应商代发'
        }
      ],
      table: {
        current_page: 1, page_count: 7, total: 100
      }
    }
  },
  methods: {
    // 分页
    handleCurrentChange() {

    },
    closeChild() {
      this.modal = null
    },
    addFun() {
      this.modalData = { type: 'creat', title: '新增供应商' }
      this.modal = Add
    },
    edcitFun(data) {
      this.modalData = { type: 'edict', data: data }
      this.modal = Add
    }

  }
}
</script>

